<template>
	<ls-page title="">
		<view class="records-container">
			<view class="records-container-main">
				<view class="container-main-item" v-for="(v, k) in lineList" :key="k">
					<view class="main-item-state">
						<view class="state-value">
							{{ v.stateDesc }}
						</view>
					</view>

					<view class="main-item-upper">
						<view class="upper-title">
							{{ v.callNo }}
						</view>
						<view class="upper-value">
							{{ v.queneName }}
						</view>
					</view>

					<view class="main-item-bellow">
						<view class="bellow-left">取号时间：</view>
						<view class="bellow-right">
							{{ v.beginDate }}
						</view>
					</view>

					<view class="main-item-time">
						<view class="time-left">{{ v.stateName }}时间：</view>
						<view class="time-right">
							{{ v.endDate ? v.endDate : '-- --' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate } from '@/api/public.js'

	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const userInfo = uni.getStorageSync('userInfo') //用户信息

	const lineList = ref([])
	const postForm = ref({
		memberMobile: userInfo.mobile,
		pageSize: '15',
		pageIndex: '1',
	})
	const hasMore = ref(true) // 是否还有数据

	// -------------------------------------------------------初始化数据-----------------------------------------------------
	onLoad((options) => {
		// 获取排队记录
		HFiveMemberAppObjProcess({ "functionName": "GetQueueRecord_H5", "contentData": postForm.value })
			.then(res => {
				console.log('res: ',res);
				lineList.value = res
			})
	})

	const onReachBottom = () => {
		console.log('onReachBottom: ');
		if (!hasMore.value) return
		postForm.value.pageIndex++
		HFiveMemberAppObjProcess({ "functionName": "GetQueueRecord_H5", "contentData": postForm.value })
			.then(res => {
				console.log('res: ',res);
				hasMore.value = res.length > 0
				lineList.value = [...lineList.value, ...res]
			})
	}
</script>

<style lang="scss" scoped>
	.records-container {
		width: 100%;
		/* height: 100%;*/
		overflow: scroll;
		box-sizing: border-box;
		padding: 40rpx 24rpx 0;

		.records-container-main {
			.container-main-item {
				background: var(--maincolor);
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 0 0 20rpx 40rpx;

				.main-item-state {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.state-value {
						background: var(--mainbaccolor6);
						border-radius: 0px 16rpx 0px 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--maincolorf2);
						line-height: 26rpx;
						padding: 8rpx 23rpx;
					}
				}

				.main-item-upper {
					display: flex;
					align-items: flex-end;
					padding-bottom: 40rpx;

					.upper-title {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 46rpx;
						color: var(--maincolorf1);
						line-height: 46rpx;
						margin-right: 16rpx;
					}

					.upper-value {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: var(--maincolorf2);
						line-height: 28rpx;
					}
				}

				.main-item-bellow {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 20rpx 0;

					.bellow-left {
						color: var(--maincolorf2);
					}

					.bellow-right {
						color: var(--maincolorf1);
					}
				}

				.main-item-time {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 20rpx 0;

					.time-left {
						color: var(--maincolorf2);
					}

					.time-right {
						color: var(--maincolorf1);
					}
				}
			}
		}
	}
</style>